import React, { Component } from "react"
import { inject, observer } from "mobx-react"
import Styles from '@/scss/froms.scss'
//引入组件
import FromDefault from '@/pages/components/rights/from/from_reveal/fromdefault'
import FromNav from '@/pages/components/rights/from/from_nav/fromnav'
import FromInput from '@/pages/components/rights/from/from_input/frominput'
//引入常量
import CONSTS from "@/inits/consts"
//引入自己的工具包
import dateUtils from "@/utils/dateutils"

@inject('store')
@observer

/********************************************************************************
 * 
 * 
 *                               已废弃组件,用作对比
 *                               现使用fromNew组件
 * 
 * 
 * ********************************************************************************/

/* 这是FROM表单组件 这是初版,使用的是先绑定在state再传到store中
    直接绑定store的写法在 fronNew 中           
*/
class Froms extends Component<IStorePropsType, any>{
  constructor(props: any) {
    super(props);
    this.state = {//此处全是todo中的属性,用于后面表单提交点击时数据赋值,这是暂时数据,所以需要用到state
      start: undefined,
      end: undefined,
      content: "",
      state: "",
      updatetime: "",
      id: "",
    }
  }

  //1、 获取表单时间 
  onOkTime = (value: any) => {
    if (value) {
      this.setState({
        start: value[0]._d.getTime(),
        end: value[1]._d.getTime(),
      })
    }
  }
  //2、绑定输入框内容
  onChangeValue = (e: any) => {
    this.setState({
      content: e.target.value
    })
  }

  //3、提交函数 此处将会判断是提交表单还是修改表单
  hadleSubmit = () => {
    const todo: todoType = {//将表单提交前的数据从state中拷贝下来准备验证上传
      start: this.state.start,
      deadline: this.state.end,
      content: this.state.content,
      state: this.state.state,
      updatetime: this.state.updatetime,
      id: this.state.id
    }
    if (todo.content.trim().length == 0 || !todo.start || !todo.deadline) {
      alert("有部分内容未填写,请填写完整再提交")
    } else {
      todo.updatetime.push({ updatetime: new Date().getTime().toString(), updatestate: this.state.nowstate }) //这一步是添加历史更新时间,拓展功能时候使用
      //判断为创建表单或者是更新表单,进行不同的操作与渲染
      switch (this.props.store.nowstate) {
        case CONSTS.FROMTYPE.CREATE: //当前状态如果是创建,
          todo.id = dateUtils.newId()//生成id
          this.props.store.addTodos(todo)
          this.props.store.changeVisible()
          alert("提交成功")
          break;
        case CONSTS.FROMTYPE.UPDATE:///当前状态如果是修改
          this.props.store.updateTodos(todo)
          this.props.store.changeVisible()
          alert("修改成功")
          break;
        default: //其他状态,用来防止误差
          this.props.store.changeVisible()
          break;
      }
    }
  }
  ///4.修改表单显示隐藏
  changeVisible = () => {
    this.props.store.changeVisible()
  }
  //5、点击将其移入回收站
  handleMoveRecyle = (id: string, state: string) => {
    this.props.store.updateTodoState(id, state)
    this.props.store.changeVisible();
    state == CONSTS.STATE.DELETE ? alert("成功移入回收站") : alert("还原成功")
  }
  //生命周期函数 初始化state,这里是点击进入From表单,如果是修改表单,将会传入初始值,如果是创建表单,后面我将会赋予一个空模板防止TS报错
  componentDidMount() {
    if (this.props.todo) {
      this.setState({
        start: this.props.todo.start,
        end: this.props.todo.deadline,
        content: this.props.todo.content,
        state: this.props.todo.state,
        updatetime: this.props.todo.updatetime,
        id: this.props.todo.id,
      })
    }
  }
  render() {
    return (
      <div className={Styles.from_box}>
        {/*一、 表单导航栏,传入表单提交函数与隐藏表单函数 */}
        {
          // <FromNav  hadleSubmit={this.hadleSubmit} changeVisible={this.changeVisible} />
        }
        {/*二、 表单输入,传入绑定的value,获取表单时间函数,绑定输入框内容 */}
        {<FromInput
          content={this.state.content} onOkTime={this.onOkTime} onChangeValue={this.onChangeValue}
          start={this.props.store.thistodo.start}
          deadline={this.props.store.thistodo.deadline}
        />}
        {/*三、 表单数据默认显示 传入store的isShow thistodo 以及移入回收站方法  以及父类的todo*/}
        { <FromDefault thistodo={this.props.store.thistodo}
          isShow={this.props.store.isShow}
          todo={this.props.todo}
          handleMoveRecyle={this.handleMoveRecyle} />}
      </div>
    )
  }
}
export default Froms


